//-------------推荐轮播---------------------------
let currentIndex = 0;
const images = document.querySelectorAll('.carousel-img');
const names = document.querySelectorAll('.carousel-name');

function showSlide(index) {
    images.forEach((img, idx) => {
        img.classList.toggle('active', idx === index);
    });
    names.forEach((name, idx) => {
        name.classList.toggle('active', idx === index);
    });
    currentIndex = index;
}

// 点击名字滚动到对应图片
document.querySelector('.carousel-names').addEventListener('click', function(e) {
    if (e.target.matches('.carousel-name')) {
        const index = parseInt(e.target.getAttribute('data-index'), 10);
        showSlide(index);
    }
});

// 绑定左右切换按钮的点击事件
document.querySelector('.prev').addEventListener('click', function() {
    showSlide((currentIndex - 1 + images.length) % images.length);
});

document.querySelector('.next').addEventListener('click', function() {
    showSlide((currentIndex + 1) % images.length);
});

// 初始显示第一张图片和名字
showSlide(currentIndex);



// --------------大轮播-----------------
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: '850px'
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式

  });
});

layui.use('element', function(){
  var element = layui.element;
  //一些事件
  element.on('tab(demo)', function(data){
    console.log(data);
  });
});

